<template>
    <!-- 模态框遮罩层 -->
    <div v-if="show" class="modal-overlay">
        <!-- 模态框内容 -->
        <div class="modal">
            <!-- 标题 -->
            <h2 class="modal-title">电影详情</h2>
            <!-- 无电影信息提示 -->
            <p v-if="!movie" class="no-movie-info">暂无电影信息</p>
            <!-- 电影详情 -->
            <div v-else class="movie-details">
                <p><strong>标题:</strong> {{ movie.title }}</p>
                <p><strong>年份:</strong> {{ movie.year }}</p>
                <p><strong>导演:</strong> {{ movie.director }}</p>
                <p><strong>类型:</strong> {{ movie.genre }}</p>
                <!-- 按钮组 -->
                <div class="modal-button-group">
                    <!-- 编辑按钮 -->
                    <button @click="editMovie" class="edit-button">
                        编辑
                    </button>
                    <!-- 关闭按钮 -->
                    <button @click="closeDetails" class="close-button">
                        关闭
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
// 引入 Vue 3 的核心 API
import { defineProps, defineEmits } from 'vue';
// 定义组件接收的 props
const props = defineProps({
    show: {
        type: Boolean,
        default: false,
        description: '控制模态框显示状态'
    },
    movie: {
        type: Object,
        default: null,
        description: '电影详情数据'
    }
});
// 定义组件触发的事件
const emits = defineEmits([
    'edit-movie', // 编辑事件
    'close-details' // 关闭事件
]);
// 编辑电影方法
const editMovie = () => {
    emits('edit-movie', props.movie); // 触发编辑事件
};
// 关闭模态框方法
const closeDetails = () => {
    emits('close-details'); // 触发关闭事件
};
</script>
<style scoped>
/* 遮罩层样式 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* 模态框样式 */
.modal {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 24px;
    width: 400px;
    max-width: 90%;
}

/* 标题样式 */
.modal-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
}

/* 无信息提示样式 */
.no-movie-info {
    color: #666;
}

/* 详情段落样式 */
.movie-details p {
    margin: 8px 0;
}

/* 按钮组样式 */
.modal-button-group {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

/* 编辑按钮样式 */
.edit-button {
    background-color: #007bff;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.edit-button:hover {
    background-color: #0069d9;
}

/* 关闭按钮样式 */
.close-button {
    background-color: #6c757d;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.close-button:hover {
    background-color: #5a6268;
}
</style>